<template>
<!--  仓库列表 -->
  <div id="storage">
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item label="仓库名">
        <el-input v-model="searchObj.name" placeholder="请输入仓库名"></el-input>
      </el-form-item>
      <el-form-item label="仓库类型">
        <el-select v-model="searchObj.cangku" placeholder="请选择">
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="" @click="search" round >查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-circle-plus-outline" id="addcell" @click="addStorage" round>新增</el-button>

    <el-table :data="StorageAry" style="width: 100%">
      <el-table-column prop="warehouseId" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="warehouseName" label="仓库名称" width="180">
      </el-table-column>
      <el-table-column prop="name" label="仓库类型">
      </el-table-column>
      <el-table-column prop="nowAmount" label="当前储存量">
      </el-table-column>
      <el-table-column prop="maxAmount" label="库存报警上限(件)">
      </el-table-column>
      <el-table-column prop="minAmount" label="库存报警下限(件)">
      </el-table-column>
      <el-table-column prop="maxCapacityAmount" label="最大存储量(件)">
      </el-table-column>
      <el-table-column prop="status" label="(禁用/启用)">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
              @change="switchStatus(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <!--操作列-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="small"
              type="primary"
              round
              icon="el-icon-edit"
              @click="updateCell(scope.$index,scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!---分页组件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--添加仓库对话框-->
    <el-dialog title="添加仓库" :visible.sync="addFormVisible">
      <el-form :model="StorageCell">
        <el-form-item label="仓库名" :label-width="formLabelWidth">
          <el-input v-model="StorageCell.warehouseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大存储" :label-width="formLabelWidth">
          <el-input v-model="StorageCell.maxCapacityAmount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存报警上限" :label-width="formLabelWidth">
          <el-input v-model="StorageCell.maxAmount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存报警下限" :label-width="formLabelWidth">
          <el-input v-model="StorageCell.minAmount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓库类型" :label-width="formLabelWidth">
          <el-input v-model="StorageCell.warehouseTypeId" autocomplete="off"></el-input>
        </el-form-item>
<!--        <el-form-item label="存储商品类型" :label-width="formLabelWidth">-->
<!--          <el-input v-model="StorageCell.warehouseTypeId" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="StorageCell.describes" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登记人" :label-width="formLabelWidth">
          <el-input v-model="StorageCell.register" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登记时间" :label-width="formLabelWidth">
          <el-input v-model="StorageCell.registerTime" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="cangkuadd">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改仓库对话框-->
    <el-dialog title="修改仓库" :visible.sync="addFormVisibleupd">
      <el-form :model="Storageupdate">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="Storageupdate.warehouseId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称" :label-width="formLabelWidth">
          <el-input v-model="Storageupdate.warehouseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓库类型" :label-width="formLabelWidth">
          <el-input v-model="Storageupdate.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存报警上限(件)" :label-width="formLabelWidth">
          <el-input v-model="Storageupdate.maxAmount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存报警下限(件)" :label-width="formLabelWidth">
          <el-input v-model="Storageupdate.minAmount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大存储量" :label-width="formLabelWidth">
          <el-input v-model="Storageupdate.maxCapacityAmount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisibleupd = false">取 消</el-button>
        <el-button type="primary" @click="updateStorageupd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Storage",
  data() {
    return{
      //修改仓库
      Storageupdate:{},
      //添加仓库
      StorageCell:{},
      //仓库对话框展示
      addFormVisibleupd:false,
      //仓库对话框展示
      addFormVisible:false,
      value: true,
      //仓库表格数组
      StorageAry:[],
      // 当前页号
      currentPage: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 0,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      // 添加表单的对象
      addForm: {},
      // lable宽度
      formLabelWidth: '120px',
      searchObj:{

      }
    }
  },
  methods:{
    //禁用/启用用户
    async switchStatus(row) {
      const result = await this.$http.post('/warehouse/switchStatus',row);
      if(result.status === 200)
        this.$message.success(result.data)
    },
    //修改仓库信息
    async updateStorageupd(){
      console.log(this.Storageupdate)
         const  {data:res} =await this.$http.post(`/warehouse/updatewarehouseById/`,this.Storageupdate)
         this.StoragePage()
         this.addFormVisibleupd=false
      //消息提示
      this.$message({
        showClose: true,
        message: '修改成功',
        type: 'success'
      });
      },
    //显示添加仓库对话框
    addStorage(){
      // 清空绑定对象
			this.addForm = {}
			//展示对话框
      this.addFormVisible = true
		},
			//显示修改仓库对话框
			async updateCell(index,row){
			// 清空绑定对象
			//this.addForm = {}
			//展示对话框
      this.addFormVisibleupd = true
      console.log(row)
      const {data: res} = await this.$http.post(`/warehouse/updwarehouseById/${row.warehouseId}`)
          this.Storageupdate = res
    },
    //仓库添加
    async cangkuadd(){
      //添加仓库
      const {data:res} =await this.$http.post(`/warehouse/storageAdd/`,this.StorageCell)
            this.StoragePage()
            this.addFormVisible=false
            //消息提示
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            });
    },
    // 表单查询
    search() {
      // 查询
      this.currentPage = 1
      this.StoragePage()
    },
    // 页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.StoragePage()
    },

    // 页号改变
    handleCurrentChange(val) {
      this.currentPage = val
      // 重新查询
      this.StoragePage()
    },
    //分页查询安全库存配置单数据
    async StoragePage(){
      const {data: res} = await this.$http.post(`/warehouse/warehouseListPage/
				${this.currentPage}/${this.pageSize}`, this.searchObj)
      console.log(res);
      this.StorageAry =res.list
      this.total =res.total
    }
  },
  created() {
    this.StoragePage()
  }
}
</script>

<style scoped>
#addcell{
  position: absolute;
  top: 80px;
  left: 890px;
}
</style>